<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Furatto :: Javascript</title>
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/furatto.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar inverse-navbar navbar-fixed-top navbar-alpha">
  <div class="navbar-inner">
    <div class="container">
      <a href="#menu" class="menu-trigger meteocon" data-meteocon="M"></a>
      <div class="nav-collapse collapse">
        <nav id="menu">
          <ul class="nav">
            <li><a class="brand" href="index.html">Furatto</a></li>
            <li class=""><a href="buttons.html">Buttons</a></li>
            <li class=""><a href="images.html">Images</a></li>
            <li class=""><a href="tables.html">Tables</a></li>
            <li class=""><a href="base.html">Base</a></li>
            <li class=""><a href="grid.html">Grid</a></li>
            <li class=""><a href="forms.html">Forms</a></li>
            <li class=""><a href="components.html">Components</a></li>
            <li class="active"><a href="javascript.html">Javascript</a></li>
          </ul>
            <ul class="nav pull-right">
              <li class="divider-vertical"></li>
              <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">DropDown Form<b class="caret bottom-up"></b></a>
              <div class="dropdown-menu bottom-up pull-right" >
                <form action="#" method="post" accept-charset="UTF-8">
                  <input id="user_username" type="text" placeholder="username" />
                  <input id="user_password" type="password" placeholder="***********" />
                  <input type="checkbox" id="checkbox1" data-furatto='checkbox' data-color="blue">
                  <label for="checkbox1" class="checkbox-label inline">Remember Me</label>
                  <input class="btn btn-primary btn-block" type="submit" name="commit" value="Sign In" />
                </form>
              </div>
              </li>
            </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

<div class="main-container">
  <div class="row-fluid">
    <div class="span12">
      <div class="furatto-block">
        <div class="furatto-large-header">
          <div class="furatto-large-container">
            <h1 class="large-header">Javascript</h1>
            <p class="motto">
            A bunch of jquery plugins for a better life.
            </p>
            <hr/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-center">
    <div class="furatto-block">
      <h3 class="light">DatePicker</h3>
      <p>A mobile-friendly, responsive and lightweight jquery date input picker. Based on <a href="http://amsul.ca/pickadate.js/index.htm">Pickadate.js</a></p>
      <input type="text" data-datepicker />
      <pre data-language="html">
         <code>
            &lt;input type="text" data-datepicker /&gt;
          </code>
      </pre>

      <p>You can choose to have the select for years and months on the date picker by adding the 'select-years' and 'select-months' data attributes </p>
      <input type="text" name="" id="" value="" data-datepicker data-select-years='true' data-select-months='true' />
      <pre data-language="html">
         <code>
            &lt;input type="text" name="" id="" value="" data-datepicker data-select-years='true' data-select-months='true'/&gt;
          </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Toolbars</h3>
      <p>This jquery plugin from <a href="http://paulkinzett.github.io/toolbar/">@paul_kinzett</a> allows you to quickly create tooltip style toolbars for use in web applications and websites.</p>
      <p>By default the position of the toolbar is top, but you can customize it by adding a 'position' data attribute.</p>
      <a href="javascript:void(0)" class="btn btn-dark" data-toolbar data-position="top" data-content="#user-toolbar-options-top">
        <i class="icon-cog icon-white nomargin"></i>
      </a>
      <div id="user-toolbar-options-top" style="display:none">
        <a href="#"><i class="icon-user icon-white"></i></a>
        <a href="#"><i class="icon-star icon-white"></i></a>
        <a href="#"><i class="icon-edit icon-white"></i></a>
        <a href="#"><i class="icon-trash icon-white"></i></a>
        <a href="#"><i class="icon-map-marker icon-white"></i></a>
      </div>
      <a href="javascript:void(0)" class="btn btn-dark" data-toolbar data-position="bottom" data-content="#user-toolbar-options-bottom">
        <i class="icon-cog icon-white nomargin"></i>
      </a>
      <div id="user-toolbar-options-bottom" style="display:none">
        <a href="#"><i class="icon-user icon-white"></i></a>
        <a href="#"><i class="icon-star icon-white"></i></a>
        <a href="#"><i class="icon-edit icon-white"></i></a>
        <a href="#"><i class="icon-trash icon-white"></i></a>
        <a href="#"><i class="icon-map-marker icon-white"></i></a>
      </div>
      <a href="javascript:void(0)" class="btn btn-dark" data-toolbar data-position="left" data-content="#user-toolbar-options-left">
        <i class="icon-cog icon-white nomargin"></i>
      </a>
      <div id="user-toolbar-options-left" style="display:none">
        <a href="#"><i class="icon-user icon-white"></i></a>
        <a href="#"><i class="icon-star icon-white"></i></a>
        <a href="#"><i class="icon-edit icon-white"></i></a>
        <a href="#"><i class="icon-trash icon-white"></i></a>
        <a href="#"><i class="icon-map-marker icon-white"></i></a>
      </div>
      <a href="javascript:void(0)" class="btn btn-dark" data-toolbar data-position="right" data-content="#user-toolbar-options-right">
        <i class="icon-cog icon-white nomargin"></i>
      </a>
      <div id="user-toolbar-options-right" style="display:none">
        <a href="#"><i class="icon-user icon-white"></i></a>
        <a href="#"><i class="icon-star icon-white"></i></a>
        <a href="#"><i class="icon-edit icon-white"></i></a>
        <a href="#"><i class="icon-trash icon-white"></i></a>
        <a href="#"><i class="icon-map-marker icon-white"></i></a>
      </div>
      <pre data-language="html">
         <code>
           <a href="javascript:void(0)" class="btn btn-dark" data-toolbar data-position="right" data-content="#user-toolbar-options-right">
             <i class="icon-cog icon-white nomargin"></i>
           </a>
           <div id="user-toolbar-options-right" style="display:none">
             <a href="#"><i class="icon-user icon-white"></i></a>
             <a href="#"><i class="icon-star icon-white"></i></a>
             <a href="#"><i class="icon-edit icon-white"></i></a>
             <a href="#"><i class="icon-trash icon-white"></i></a>
             <a href="#"><i class="icon-map-marker icon-white"></i></a>
           </div>
        </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Modal</h3>
      <p>Furatto comes with a great and sleek modal based on <a href="http://labs.voronianski.com/jquery.avgrund.js/">Avgrund</a> jquery plugin.</p>
      <a href="javascript:void(0)" class="btn btn-primary btn-large" data-target="#myModal" data-toggle="modal">Show it</a>
      <div id="myModal" class="hide">
        <div class="modal-header">
          <h4 class="header">Header</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="modal-footer">
          <a href="javascript:void(0)" class="btn btn-primary pull-right">Save</a>
          <a href="javascript:void(0)" class="btn pull-right">Save</a>
        </div>
      </div>
      <pre data-language="html">
        <code>
         <div id="myModal" class="hide">
           <div class="modal-header">
             <h4 class="header">Header</h4>
           </div>
           <div class="modal-body">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           </div>
           <div class="modal-footer">
             <a href="javascript:void(0)" class="btn btn-primary pull-right">Save</a>
             <a href="javascript:void(0)" class="btn pull-right">Save</a>
           </div>
         </div>
        </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Carousel</h3>
      <p>The slideshow below shows the generic cycling functionality through images just like in a carousel.</p>
      <div class="row-fluid">
        <div class="rslides_container center">
          <ul class="rslides" id="slider1">
            <li>
            <img src="http://lorempixel.com/800/500/nightlife/1" alt="">
            <div class="caption">
              <h3 class="caption-header">Header</h3>
              <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </li>
            <li>
            <img src="http://lorempixel.com/800/500/nightlife/2" alt="">
            <div class="caption">
              <h3 class="caption-header">Header</h3>
              <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </li>
            <li>
            <img src="http://lorempixel.com/800/500/nightlife/3" alt="">
            <div class="caption">
              <h3 class="caption-header">Header</h3>
              <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </li>
            <li>
            <img src="http://lorempixel.com/800/500/nightlife/4" alt="">
            <div class="caption">
              <h3 class="caption-header">Header</h3>
              <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </li>
            <li>
            <img src="http://lorempixel.com/800/500/nightlife/5" alt="">
            <div class="caption">
              <h3 class="caption-header">Header</h3>
              <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </li>
          </ul>
        </div>
      </div>
      <pre data-language="html">
        <code>
          <div class="row-fluid">
            <div class="rslides_container center">
              &lt;ul class="rslides" id="slider1">
                <li>
                <img src="http://lorempixel.com/800/500/nightlife/1" alt="">
                <div class="caption">
                  <h3 class="caption-header">Header</h3>
                  <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                </li>
                <li>
                <img src="http://lorempixel.com/800/500/nightlife/2" alt="">
                <div class="caption">
                  <h3 class="caption-header">Header</h3>
                  <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                </li>
                <li>
                <img src="http://lorempixel.com/800/500/nightlife/3" alt="">
                <div class="caption">
                  <h3 class="caption-header">Header</h3>
                  <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                </li>
                <li>
                <img src="http://lorempixel.com/800/500/nightlife/4" alt="">
                <div class="caption">
                  <h3 class="caption-header">Header</h3>
                  <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                </li>
                <li>
                <img src="http://lorempixel.com/800/500/nightlife/5" alt="">
                <div class="caption">
                  <h3 class="caption-header">Header</h3>
                  <p class="caption-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                </li>
              </ul>
            </div>
          </div>
        </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Dropdown Menu</h3>
      <p>Furatto comes with a beautiful dropdown menu for grouping sub-navigations on the navbar, for now...</p>
      <!-- The drop down menu -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="container">
            <a href="#menu" class="menu-trigger meteocon" data-meteocon="M"></a>
            <div class="nav-collapse collapse">
              <nav id="menu">
                <ul class="nav">
                  <li><a class="brand" href="index.html">Furatto</a></li>
                </ul>
                <ul class="nav pull-right">
                  <li class="divider-vertical"></li>
                  <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Settings<b class="caret bottom-up"></b></a>
                  <ul class="dropdown-menu bottom-up pull-right">
                    <li><a href="#">Graphic Design</a></li>
                    <li><a href="#">Software</a></li>
                    <li><a href="#">Industrial Design</a></li>
                    <li><a href="#">Business Planning</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Development and Research</a></li>
                  </ul>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
      <!-- Close DropDown menu -->
    <pre data-language="html">
    <code>
      <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
              <a href="#menu" class="menu-trigger meteocon" data-meteocon="M"></a>
              <div class="nav-collapse collapse">
                <nav id="menu">
                  <ul class="nav">
                    <li><a class="brand" href="index.html">Furatto</a></li>
                    <li class="active"><a href="javascript.html">Javascript</a></li>
                  </ul>
                  <ul class="nav pull-right">
                    <li class="divider-vertical"></li>
                    <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Settings<b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-right">
                      <li><a href="#">Graphic Design</a></li>
                      <li><a href="#">Software</a></li>
                      <li><a href="#">Industrial Design</a></li>
                      <li><a href="#">Business Planning</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Development and Research</a></li>
                    </ul>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
    </code>
    </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Dropdown Forms</h3>
      <p>Furatto makes it easy to integrate a form into the navbar, for example a Sign In form...</p>
      <span class="label label-inverse">Watch out!</span>
      <p>The only gotcha here is that insted of adding a <span class="code">ul</span> element with class name <span class="code">dropdown-menu</span>, you just have to change it to a <span class="code">div</span> element.</p>
      <!-- The drop down menu -->
      <pre data-language="html">
        <code>
          <div class="navbar">
            <div class="navbar-inner">
              <div class="container">
                <a href="#menu" class="menu-trigger meteocon" data-meteocon="M"></a>
                <div class="nav-collapse collapse">
                  <nav id="menu">
                    ...
                    <ul class="nav pull-right">
                      <li class="divider-vertical"></li>
                      <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Sign in<b class="caret bottom-up"></b></a>
                      <div class="dropdown-menu bottom-up pull-right">
                        <form action="#" method="post" accept-charset="UTF-8">
                          <input id="user_username" type="text" placeholder="username" />
                          <input id="user_password" type="password" placeholder="***********" />
                          <input type="checkbox" id="checkbox1" data-furatto='checkbox' data-color="blue">
                          <label for="checkbox1" class="checkbox-label inline">Remember Me</label>
                          <input class="btn btn-primary btn-block" type="submit" name="commit" value="Sign In" />
                        </form>
                      </div>
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </code>
      </pre>
      <!-- Close DropDown menu -->
    </div>
  </div>
</div>


<div class="footer">
  <div class="footer-wrapper">
    <div class="container">
      <div class="row-fluid">
        <div class="span12">
          <div class="span6">
            <p class="copyright">Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank" class="link">Apache License v2.0</a></p>
          </div>
          <div class="span6">
            <ul class="hrz-nav pull-right">
              <li><a href="index.html">Home</a></li>
              <li><a href="assets/furatto.zip">Download</a></li>
              <li><a href="https://github.com/IcaliaLabs/furatto-rails">Rails</a></li>
              <li><a href="https://github.com/IcaliaLabs/furatto" target="_blank">Github</a></li>
            </ul>
          </div>
        </div>      
      </div>
    </div>
  </div>
</div>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-32608013-3', 'icalialabs.github.io');
    ga('send', 'pageview');

  </script>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/jpanel.js"></script>
<script src="assets/js/jquery.dropkick-1.0.0.js"></script>
<script src="assets/js/jquery.icheck.js"></script>
<script src="assets/js/rainbow-custom.min.js"></script>
<script src="assets/js/tooltip.js"></script>
<script src="assets/js/jquery.tagsinput.js"></script>
<script src="assets/js/picker.js"></script>
<script src="assets/js/picker.date.js"></script>
<script src="assets/js/picker.time.js"></script>
<script src="assets/js/legacy.js"></script>
<script src="assets/js/jquery.toolbar.js"></script>
<script src="assets/js/jquery.avgrund.js"></script>
<script src="assets/js/responsiveslides.js"></script>
<script src="assets/js/responsive-tables.js"></script>
<script src="assets/js/dropdown.js"></script>
<script src="assets/js/manifest.js"></script>

</body>
</html>
